<template>
  <mu-flex :class="classes" :align-items="alignItmes" direction="column">
    <template v-if="!isSystem">
      <div class="user">{{user}}</div>
      <mu-chip :color="color" @click="onClick" :class="dtype" v-elevation="dtype==='image'?4:0">
        <template v-if="dtype==='text'">{{message}}</template>
        <img :src="data" :alt="message" v-else />
      </mu-chip>
    </template>
    <mu-expand-transition v-if="isSystem">
      <mu-chip :color="color" v-show="show" delete @delete="onDelete">{{message}}</mu-chip>
    </mu-expand-transition>
  </mu-flex>
</template>
<script>
export default {
  name: 'chatroom-messages-item',
  props: {
    id: {
      type: Number,
      required: true,
    },
    user: {
      type: String,
      default: '',
    },
    message: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      required: true,
      validator: type => ['self', 'other', 'system'].indexOf(type) >= 0,
    },
    dtype: {
      type: String,
      default: 'text',
    },
    data: {
      default: null,
    },
  },
  data () {
    return {
      show: true,
    }
  },
  computed: {
    isSystem () {
      return this.type === 'system'
    },
    isOther () {
      return this.type === 'other'
    },
    isSelf () {
      return this.type === 'self'
    },
    color () {
      const color = {
        system: 'primary',
        other: 'secondary',
        self: 'primary',
      }
      return color[this.type]
    },
    classes () {
      return 'message ' + this.type + (this.show ? ' show' : ' hide')
    },
    alignItmes () {
      if (this.type === 'system') return 'center'
      if (this.type === 'other') return 'start'
      else return 'end'
    },
  },
  methods: {
    onDelete () {
      this.show = false
      window.setTimeout(() => {
        this.$store.commit('DEL_MESSAGE', this.id)
      }, 500)
    },
    onClick () {
      this.$emit('on-message-click')
    },
  },
}
</script>
<style lang="scss" scoped>
.message {
  .mu-chip {
    position: relative;
    max-width: 85%;
    transition: 0.5s;
  }
  img {
    max-width: 100%;
  }
  &.show .mu-chip{
    margin-bottom: 15px;
  }
  &.hide .mu-chip{
    margin-bottom: 0;
    opacity: 0;
  }
}
.system {
  .mu-chip {
    overflow: hidden;
  }
}
.other,
.self {
  .user {
    padding: 0 10px;
    margin-bottom: 2px;
  }
  .mu-chip {
    border-radius: 7px;
    white-space: normal;
    line-height: 24px;
    padding: 8px 15px;
  }
}
.image.mu-chip {
  padding: 0;
  overflow: hidden;
}
</style>
